<template>
	<view style="padding: 20rpx;">
		<view class="box">
			<view style="margin-bottom: 10rpx;">订单编号：{{orders.orderNo}}</view>
			<view style="font-size: 24rpx;color: #888;">下单时间：{{orders.time}}</view>
		</view>
		<view class="box" style="margin: 20rpx 0;">
			<navigator :url="'/pages/detail/detail?businessId='+orders.businessId" style="margin-bottom: 20rpx;color: #666;font-size: 36rpx;">{{orders.businessName}}</navigator>
			<view>
				<view style="display: flex;grid-gap: 20rpx;margin-bottom: 20rpx;" v-for="item in ordersItemList"
					:key="item.id">
					<view style="width: 140rpx;height: 140rpx;">
						<image :src="item.goodsImg"
							style="width: 100%;height: 100%;display: block;border-radius: 10rpx;" mode=""></image>
					</view>
					<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
						<view>{{item.goodsName}}</view>
						<view style="color: #888;">x{{item.num}}</view>
					</view>
					<view style="width: 150rpx;text-align: right;color: red;padding-top: 10rpx;">
						￥{{item.price}}
					</view>
				</view>
			</view>
			<!-- 优惠和总金额信息 -->
			<view v-if="orders.discount">
				<view style="text-align: right;">
					<text>已优惠</text>
					<text style="color: red;">￥{{orders.discount}}</text>
					<text style="margin-left: 20rpx">小计</text>
					<text style="color: red;font-size: 36rpx;font-weight: bold;">￥{{orders.actual}}</text>
				</view>
				
				<view style="flex: 1;text-align: right;margin-top: 20rpx;">
					<uni-tag v-if="orders.status==='待支付'" text="支付" type="primary" size="mini" inverted
						@click="changeStatus(orders,'待发货')"></uni-tag>
					<uni-tag v-if="orders.status==='待发货'" text="申请退款" type="error" size="mini" inverted
						@click="changeStatus(orders,'已退款')"></uni-tag>
					<uni-tag v-if="orders.status==='待收货'" text="确认收货" type="warning" size="mini" inverted
						@click="changeStatus(orders,'待评价')"></uni-tag>
					<uni-tag v-if="orders.status==='待评价'" text="评价" type="royal" size="mini"></uni-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders:{},
				ordersItemList:[]
			}
		},
		onLoad(option){
			let orderId=option.orderId
			this.load(orderId)
		},
		methods: {
			changeStatus(orders, status) {
				let form = JSON.parse(JSON.stringify(orders))
				form.status = status
				this.$request.put('/orders/update', form).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '操作成功'
						})
						this.loadOrders()
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			load(orderId){
				this.$request.get('/orders/selectById/'+orderId).then(res=>{
					this.orders=res.data||{}
				})
				this.$request.get('/ordersItem/selectAll',{orderId:orderId}).then(res=>{
					this.ordersItemList=res.data||[]
				})
			}
		}
	}
</script>

<style>

</style>
